import React, {Component, Fragment} from 'react';
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, Icon } from 'weaver-mobile';
import classnames from 'classnames';
import isEmpty from 'lodash/isEmpty';

const getLabel = Tools.getLabel;

@withRouter
@observer
export default class SignData extends Component {
    render(){
        const {store, data} = this.props;
        const {status, signfrom, signTime, position, reSign} = data;
        const {convertStatus, callSign} = store;
        const statusObj = convertStatus(status || signfrom || '');
        const classDef = {
            status: true
        }
        statusObj != null && Object.assign(classDef, {[statusObj.className]: true});
        const statusClassName = classnames(classDef);

        return (
            <div className='signData'>
            {
                !isEmpty(signTime) &&
                <div className='signDate'>
                    <div className='signTime'>{`${getLabel('18949','打卡时间')} ${data.signbelongspan || ''} ${signTime}`}</div>
                    <div className={statusClassName}>{statusObj.label}</div>
                </div>
            }
            {
                !isEmpty(position) &&
                <div className='position'>
                    <span><Icon className='positionIcon' type='position' size='xxs'/>{position}</span>
                </div>
            }
            {
                !isEmpty(reSign) && reSign == '1' &&
                <div className='resign' onClick={() => callSign(data)}>{getLabel('500498','更新打卡时间')}</div>
            }
            </div>
        )
    }
}